<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>写游记</title>
    <link rel="icon" href="../static/img/logo2.png" type="image/png">
    <link rel="stylesheet" href="../static/css/Buttons.css">
    <link rel="stylesheet" href="../static/css/ku/bootstrap.css">
    <script src="../static/js/ku/jquery.min.js"></script>
    <script src="../static/js/ku/bootstrap.js"></script>
    <script>
        $(document).ready(function () {
            $('#toutu').click(function () {
                data1 = $(this).text();
                city1 ={{ list.city_id }};
                html = $.ajax({
                    url: "/region/",
                    type: 'POST',
                    data: {'data': data1, 'city': city1},
                    success: function (html) {
                        $("#div22").html(html);
                    }
                });
            })
        })
    </script>
    <script>
        function shield() {
            var top = ($(window).height() - $('#test').height()) / 2;
            var left = ($(window).width() - $('#test').width()) / 2;
            var scrollTop = $(document).scrollTop();
            var scrollLeft = $(document).scrollLeft();
            $('#log_window').css({position: 'absolute', 'top': top + scrollTop, left: left + scrollLeft}).show();
            $('body').css("overflow", "hidden")
        }

        function cancel_shield() {
            var l = document.getElementById("log_window");
            l.style.display = "none";
            $('body').css("overflow", "auto")
        }
    </script>
    <link href="../static/css/ku/fuwenbenboots.css" rel="stylesheet">
    <script src="../static/js/ku/fuwenbenjq.js"></script>
    <script src="../static/js/ku/fuwenbenboot.js"></script>

    <link href="../static/jq22summernote-develop847420160420/summernote-develop20160420/summernote.css"
          rel="stylesheet">
    <script src="../static/jq22summernote-develop847420160420/summernote-develop20160420/summernote.js"></script>
    <link rel="stylesheet" href="../static/css/putquestions.css">
    <link rel="stylesheet" href="../static/css/daohang.css">
    <link rel="stylesheet" href="../static/css/wtn.css">
</head>
<body style="background-color:#f5f5f5">
<div id="test"></div>
<div id="log_window">
    <div id="divzhe">
        <h3>图片<span id="err1"></span>请重新上传正规图片!!</h3>
        <a href="javascript:cancel_shield()">关闭</a>
    </div>
               
</div>
<nav class="navbar navbar-expand-md bg-dark navbar-dark" style="font-size: 16px;margin: 0;padding: 0">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#cla1">
        <span class="navbar-toggler-icon"></span>
    </button>
    <img src="../static/img/logo1.png" alt="">
    <div class="collapse navbar-collapse" id="cla1">
        <ul class="navbar-nav pull-right" style="margin: 0 10px 0 auto">
            <li class="nav-item">
                <a class="nav-link" href="/homepage/">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/search/">目的地</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                    旅游攻略
                </a>
                <div class="dropdown-menu" style="text-align: center">
                    <a class="dropdown-item" href="/travels/">游记</a>
                    <a class="dropdown-item" href="/list/">榜单</a>
                    <a class="dropdown-item" href="/recommend/">景点推荐</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                    社区
                </a>
                <div class="dropdown-menu" style="text-align: center">
                    <a class="dropdown-item" href="/qa/">问答</a>
                    <a class="dropdown-item" href="/companions/">结伴</a>
                </div>
            </li>
            {% if request.session.is_login %}     
                <li class="nav-item"><a href="/house/" class="nav-link">{{ request.session.user_name }}</a></li>
                <li class="nav-item"><a href="/logout/" class="nav-link">注销账号</a></li>
            {% else %}
                <li class="nav-item"><a href="/signin/" class="nav-link">登录/注册</a></li>
            {% endif %}
        </ul>
    </div>
</nav>
<div class="row clearfix">
    <div class="col-md-12 column" id="div21" style="margin: 0;padding: 0">
        <h3 style="margin-top: 200px">上传游记封面</h3>
        <form action="/wtn/" method="post" id="form1" enctype="multipart/form-data">
            <div class="image-upload">
                <label for="file-input">
                    <img src="../static/img/Icon/shangchuan.png" width="120px" style="margin-top: 10px"/>
                </label>
                <input id="file-input" type="file" style="display: none" onchange="xmTanUploadImg(this)" name="img">
            </div>
    </div>
    <hr/>
    <script type="text/javascript">
        //判断浏览器是否支持FileReader接口
        if (typeof FileReader == 'undefined') {
            document.getElementById("xmTanDiv").InnerHTML = "<h1>当前浏览器不支持FileReader接口</h1>";
            //使选择控件不可操作
            document.getElementById("xdaTanFileImg").setAttribute("disabled", "disabled");
        }

        //选择图片，马上预览
        function xmTanUploadImg(obj) {
            var file = obj.files[0];
            console.log(obj);
            console.log(file);
            console.log("file.size = " + file.size);  //file.size 单位为byte
            var reader = new FileReader();
            //读取文件过程方法
            reader.onloadstart = function (e) {
                console.log("开始读取....");
            };
            reader.onprogress = function (e) {
                console.log("正在读取中....");
            };
            reader.onabort = function (e) {
                console.log("中断读取....");
            };
            reader.onerror = function (e) {
                console.log("读取异常....");
            };
            reader.onload = function (e) {
                console.log("成功读取....");
                img = document.getElementById("div21");
                img.style.backgroundImage = 'url("' + this.result + '")';
                img.style.backgroundRepeat = "no-repeat";
                img.style.backgroundPosition = 'center'
                //或者 img.src = this.result;  //e.target == this
            };

            reader.readAsDataURL(file)
        }
    </script>
</div>
<div style="text-align: center;width: 100%;margin-top: 50px">
    <span style="font-size: 40px">写游记</span>
    <hr/>
</div>
<div class="container" style="background-color: rgba(220,38,38,0);">
    <div class="hero-unit" style="background-color:rgba(220,38,38,0)">
        <div style="margin: 20px auto"><span>标题：</span><input type="text"
                                                              style="font-size: 25px;width:80%;height: 60px;border-radius: 10px"
                                                              name="title">
        </div>
        <div style="margin: 20px auto"><span>地点：</span>
            <input name="place" autocomplete="off" class="cityinput" id="citySelect" type="text" value="苏州"
                   style="width: 30%;height: 40px;border-radius: 10px;background: white">
            <script src="../static/js/homepage.js"></script>
        </div>
        <div style="margin: 20px auto" id="div24"><span>出行时间：</span>
            <input type="text" id="date" style="width: 30%;height: 40px;border-radius: 10px;" name="date">
            <script src="../static/js/ku/datedropper.min.js"></script>
            <script>
                $("#date").dateSelect();
            </script>
        </div>
        <div style="margin: 20px auto"><span>人均消费：</span><input type="number"
                                                                style="width: 30%;height: 40px;border-radius: 10px"
                                                                name="consumption">元
        </div>
        <div id="summernote"></div>
        <input type="text" style="display: none" id="html" name="html">
        <script>
            $('#summernote').summernote({
                lang: 'zh-CN',
                Height: 600,
                placeholder: '请在此写游记...',
                toolbar: [
                    // [groupName, [list of button]]
                    ['style1', ['style']],
                    ['style', [, 'bold', 'italic', 'underline', 'strikethrough']],
                    ['para', ['ul', 'ol',]],
                    ['insert', ['link', 'picture',]],
                    ["misc", ['fullscreen', 'undo', 'redo']]
                ],
                callbacks: {
                    onImageUpload: function (files) {
                        var imageData = new FormData();
                        imageData.append("imageData", files[0]);
                        $.ajax({
                            data: imageData,
                            type: "POST",
                            url: "/passimg/",
                            cache: false,
                            contentType: false,
                            processData: false,
                            success: function (result) {
                                s = result.substr(0, 1);
                                if (s == 'h') {
                                    var imgNode = document.createElement("img");
                                    imgNode.src = result;
                                    $('#summernote').summernote('insertNode', imgNode);
                                }
                                else {
                                    $("#err1").html(result);
                                    shield();
                                }

                            },
                            error: function () {
                                alert("服务器异常，请重新操作。");
                            }
                        });
                    }
                }
            });
        </script>
        <div style="width:60%;margin: auto ;display: flex;">
            <div style="width: 50%;text-align: center">
                <button class="button button-raised button-pill button-inverse" onclick="" id="tijiao"
                        style="margin-left:0 " type="submit">提交
                </button>
            </div>
        </div>
        </form>

        <div id="alerts"></div>
        <script>
            $('#tijiao').click(function () {
                text = document.getElementsByClassName("note-editable panel-body")[0].innerHTML;
                $("#html").val(text)
            })
        </script>

    </div>
</div>
<div>
    <a class="to-top" style="z-index: 999"><img src="../static/img/Icon/huidao.png" alt="" width="60px"></a>
    <script>!function (o) {
        "use strict";
        o.fn.toTop = function (t) {
            var i = this, e = o(window), s = o("html, body"),
                n = o.extend({autohide: !0, offset: 420, speed: 500, position: !0, right: 15, bottom: 30}, t);
            i.css({cursor: "pointer"}), n.autohide && i.css("display", "none"), n.position && i.css({
                position: "fixed",
                right: n.right,
                bottom: n.bottom
            }), i.click(function () {
                s.animate({scrollTop: 0}, n.speed)
            }), e.scroll(function () {
                var o = e.scrollTop();
                n.autohide && (o > n.offset ? i.fadeIn(n.speed) : i.fadeOut(n.speed))
            })
        }
    }(jQuery);
    $(function () {
        $('.to-top').toTop();
    });
    </script>
</div>
<div class="row clearfix" style="background:rgba(52,58,64,1)">
    <div class="col-md-2 column">
    </div>
    <div class="col-md-8 column">
        <div id="fool" style="width: 100%;text-align: center;height: 100px;color: #e2e3e5;">
            <p style="margin-top: 20px">© 2018 meetjinn.com 京ICP备0000000号
                <img src="http://images.mafengwo.net/images/footer/police_record.png"
                     width="12" style="margin:0 2px 4px 0;">公网安备000000000号<span
                        class="m_l_10">违法和不良信息举报电话: ---------- 举报邮箱 ----------</span></p>
            <p>网络出版服务许可证：----------<span class="m_l_10">增值电信业务经营许可证：京00000000</span> 营业执照帮助中心<span
                    class="m_l_10">觅景客服:</span><span
                    class="highlight">4006-000-000</span>
            </p>
        </div>
    </div>
    <div class="col-md-2 column">
    </div>
</div>


</body>
</html>